import { Button, Form, Input, message } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import React from 'react'
import style from './Login.css'
import Particle from '../../components/specialEffect/Particle'
import axios from 'axios'

export default function Login(props) {
    
    const onFinish = (values) => {
        axios.get(`http://localhost:5000/users?username=${values
        .username}&password=${values.password}&roleState=true&_expand=role`).then(res=>{
            if (res.data.length===0){
                message.error('用户名或密码不配')
            }else{
                localStorage.setItem('token', JSON.stringify(res.data[0]))
                props.history.push('/')
            }
        })
    };
    return (
        <div style={{ background: 'rgb(35,39,65)', height: '100%' }}>
            <Particle></Particle>
            <div className={style.formContainer}>
                <div className={style.logintitle}>全球新闻发布管理系统</div>

                <Form
                    name="normal_login"
                    className="login-form"
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入账号！',
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码！',
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
            
        </div>
    )
}
